<h2> Manage User</h2>
	             <div id="addform">     
				<span id="loading"></span>
					<table width=70% border=0 align="center" cellpadding="0" cellspacing="0"> 
					<tr>
						<td width="14%" height="35">Username :	</td><td width="36%" height="35"><input type=text id="username" class="k-textbox" required>	</td>
					 
					   <td width="13%" height="35">Password :	</td><td width="37%" height="35"><input type=password id="password" class="k-textbox" required >	</td>
					</tr>
					<tr>
						<td height="35">ชื่อ :	</td><td height="35"><input type=text id="fname" class="k-textbox">	</td>
					 
					   <td height="35">สกุล :	</td><td height="35"><input type=text id="lname" class="k-textbox">	</td>
					</tr>	
					<tr>
						<td height="35">Email :	</td><td height="35">
						<input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net"  required data-email-msg="Email format is not valid" />
				 	</td>
					 
					   <td height="35">โทรศัพท์ :	</td><td height="35"><input type=text id="mobile" class="k-textbox">	</td>
					</tr>	
					<tr>
						<td height="35">Position :	</td>
						<td height="35">
							   <select name="position" id="pos" class="k-selectbox">
							      <option value="0">-</option>  
				 			<?php 
				 				foreach($positionAll as $key){
				 		echo "<option value=\"".$key->position_id."\">".$key->position_name."</option>";
				 					//print_r($key->position_id);
				 				}
				 			?>
				 		
					 		 </select> 
							</td>
					 
						<td height="35">Department :	</td>
						<td height="35">
							   <select name="department" id="dep" class="k-selectbox">  
							      <option value="0">-</option>
				 			<?php 
				 				foreach($departmentAll as $key){
				  echo "<option value=\"".$key->department_id."\">".$key->department_name."</option>";
				 					//print_r($key->position_id);
				 				}
				 			?>
				 		
					 		 </select>  
							</td>
					</tr>
					<tr>
						<td height="35">Factory :	</td>
						<td height="35">
							   <select name="factory" id="fac" class="k-selectbox">  
							   <option value="0">-</option>
				 			<?php 
				 				foreach($factoryAll as $key){
				 					 echo "<option value=\"".$key->factory_id."\">".$key->factory_name."</option>";
				 					//print_r($key->position_id);
				 				}
				 			?>
				 		
					 		 </select>  
							</td>
				 
						<td height="35" colspan=2 align=center><input type="button" class="k-button" id="submit" value="    Add Staff    "></td>
					</tr>		
					</table>
				   <p>&nbsp;</p>
			    </div>
            <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
 	               <tr>
 	                 <td>  <table id="griddata">
                <thead>
                    <tr>
                        <th data-field="ID">ID</th>
                        <th data-field="Username">Username</th>
                        <th data-field="First">First Name</th>
                        <th data-field="Last">Last Name</th>
                        <th data-field="Email">Email</th>
                        <th data-field="Mobile">Mobile</th>
                        <th data-field="Position">Position</th>
                        <th data-field="Department">Department</th>
                        <th data-field="Factory">Factory</th>
                        <th data-field="Center">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                 <?php foreach($rs as $r)
					{ 
                    	echo "<tr>";
                        echo "<td>"."<div align='center'>".$r['user_id']."</div>"."</td>";
                        echo "<td>".$r['user_username']."</td>";
                        echo "<td>".$r['user_fname']."</td>";
                        echo "<td>".$r['user_lname']."</td>";
                        echo "<td>".$r['user_email']."</td>";
                        echo "<td>".$r['user_mobile']."</td>";
                        echo "<td>".$r['position_name']."</td>";
                        echo "<td>".$r['department_name']."</td>";
                        echo "<td>".$r['factory_name']."</td>";
                        echo "<td>";
						echo anchor("user/allUser/".$r['user_id'],
						"<input type='submit' class='k-button' id='submit' value=' แก้ไข '>");
						echo anchor("user/deleteUser/".$r['user_id'],
						"<input type='submit' class='k-button' id='submit' value=' ลบ '>");
						echo "</td>";
                   		echo "</tr>";
					}
				?>
                </tbody>
            </table>

            <script>
                $(document).ready(function() {
                    $("#griddata").kendoGrid({
						columns: [
						{ field: "ID", width: "10px" },
						{ field: "Username", width: "70px" },
						{ field: "First", width: "70px" },
						{ field: "Last", width: "70px" },
						{ field: "Email", width: "70px" },
						{ field: "Mobile", width: "5px" },
						{ field: "Position", width: "5px" },
						{ field: "Department", width: "5px" },
						{ field: "Factory", width: "5px" },
						{ field: "Center", width: "120px" }
						],
						//height: 270,
						filterable: true,  
                        scrollable: false,
						pageable: true,
						dataSource: {
						pageSize: 10 
						}
					});
                });
            </script>
        </div></td>
              </tr>
</table>
<script>
                $(document).ready(function() {
                	 var validator = $("#addform").kendoValidator().data("kendoValidator"),
                     status = $(".status");
					$("#dep").kendoDropDownList().trigger("change"); 
					$("#fac").kendoDropDownList().trigger("change"); 
					$("#pos").kendoDropDownList().trigger("change"); 
                	$("#submit").click(function(){
                        var username = $("#username").val();
                        var password = $("#password").val();
                        var fname = $("#fname").val();  
                        var lname = $("#lname").val();  // เวลา
                        var email = $("#email").val();
                        var position = $("#pos").val();  
                        var department = $("#dep").val();  // เวลา
                        var factory = $("#fac").val();
                        var mobile = $("#mobile").val();
                       
                        var loading = "<img src='<?=base_url(); ?>/css/BlueOpal/loading-image.gif?>'>";
                	$.ajax({
    					url : "<?php echo base_url();?>/index.php/user/addUser",
    					type: "POST",
    					data:({  
        						username : username,
        						password : password,
        						fname : fname,
        						lname : lname,
        						email : email,
        						position : position,
        						department : department,
        						factory : factory,
        						mobile : mobile
        						 
        				
    						}),
                		
                		beforeSend : function(){
									$("#loading").html(loading);
							
							//$("#overlay").css('display','block'); // displaying the overlay
			               // jQuery("#popup").css('display','block'); // displaying the popup
							//$("#submit").attr("disabled","disabled");
						},
						success : function(rs){
					 			 
					 			$("#loading").html('');
					 			 location.reload();
					 			
				 
	    					}
                		})		
                	});
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: "<?=base_url();?>/index.php/user/getAllUser",
                                dataType: "json"
                            },
							update: {
                                url: "<?=base_url();?>/index.php/user/updateUser",
                    			
								type: "POST"
                            },
                            destroy: {
                            	url: "<?=base_url();?>/index.php/user/deleteUser",
                            	 
                    			type: "POST"
                            },
                            create: {
                            	url: "<?=base_url();?>/index.php/user/addUser",
                            	 
                    			type: "POST"
                                
                            },
                            error: function (e) {
                                alert(e);
                            },
                            success: function (e) {
                                alert(e);
                            } 
                        },
                    refresh: true,
                    batch: true,
                    pageSize: 10,
                    schema: {
                        model: {
                            id: "user_id",
                            fields: {
                                user_id: {editable: false, nullable: true} ,
                            	user_username: { type: "string" },
                                user_fname: { type: "string" },
                                user_lname: { type: "string" },
                                user_email:{ type: "string" },
                                user_mobile:{ type: "string" }
                            }
                        }
                    }
                });
                
                    $("#grid").kendoGrid({
                    	dataSource: dataSource,
                    	error: function(e) {
							alert(e.responseText);
						},
                    	sortable: {
                            mode: "single",
                           
                            allowUnsort: false
                        },
                   		filterable: true,
                        pageable: true, 
                        scrollable: false,
                        
                        
                        columns: [ {
                                     field: "user_id",
                                     title: "ID",
                                     width: "5px"
                                  } ,
                                  {
  		                            field: "user_username",
  		                            title: "Username",
  		                            width: "30px"
  		                         } ,
		                         {
		                             field: "user_fname",
		                             title: "First Name",
		                             width: "50px"
		                          } ,
                                 
                                  {
                                      field: "user_lname",
                                      title: "Last Name",
                                      width: "50px"
                                   } ,
 
                                    {
                                        field: "user_email",
                                        title: "Email",
                                        width: "100px"
                                     } ,
                                     {
                                         field: "user_mobile",
                                         title: "Mobile ",
                                         width: "50px"
                                      } ,
                                      {
                                          field: "position_name",
                                          title: "Position",
                                          width: "100px"
                                       } ,
                                       {
                                           field: "department_name",
                                           title: "Department ",
                                           width: "50px"
                                        } ,
                                        {
                                            field: "factory_name",
                                            title: "Factory ",
                                            width: "50px"
                                         } ,
                                         { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
                                
                                  editable: "popup"
               
 
        });
    });                
            </script>
